<!--suppress ALL -->
<template>
  <div id="myChart2" :style="{width: '1600px', height: '800px',padding:'20px'}"/>
</template>

<script>
var echarts = require('echarts');
import request from '@/utils/request';

export default {
  name: 'User',
  data() {
    return {
      chart: null,
      // 查询参数
      query: {
        groupBy: 'userId',
        queryId: '',
        queryModule: '',
        queryDate: []
      },
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // echarts数据
      echartsData: {
        label: [],
        data: []
      }
    };
  },
  mounted() {
    this.initCharts();
    this.fectchData();
  },

  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart2'));
      this.setOptions();
    },
    setOptions() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: this.echartsData.label
          }
        ],
        yAxis: {},
        series: [
          {
            name: '请求次数',
            type: 'bar',
            barWidth: '60%',
            data: this.echartsData.data
          }
        ]
      };
      this.chart.setOption(option);
    },
    fectchData() {
      request({
        url: '/v1/statistics/web/app/interval',
        method: 'get'
      }).then(response => {
        if (response.data.length > 0) {
          this.echartsData = response.data[0];
          this.setOptions();
        }
      });
    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
</style>
